<template>
    <div @keydown.enter="keyLogin" class="parent" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">
        <Modal :draggable="true" v-model="modal"
               width="360"
               class-name="login-vertical-center-modal"
               :mask-closable="false">
            <p slot="header"
               style="color:red;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>警告提示</span>
            </p>
            <div style="text-align:center">
                <p>{{message}}</p>
            </div>
            <div slot="footer">
                <Button type="error"
                        long
                        @click="hideModal">确认
                </Button>
            </div>
        </Modal>

        <div class="login_title">
            <div class="login_title_box">
                <img src="../images/login_title.png" alt="">
                <div class="login_contant_box">
                    <div class="login_title_box_contant">
                        <p>让管理更简单</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="login_box_div">
            <diV class="login_box">
                <div class="loginForm-outer" style="z-index: 2;position: relative">
                    <div class="loginForm-outer-div">
                        <div class="loginForm">
                            <Spin size="large"
                                fix
                                v-if="loginSpin"
                                class="login_loading_spin">
                                <Icon type="load-c"
                                    size="18"
                                    class="login-spin-icon-load"></Icon>
                                <div>正在登录中...</div>
                            </Spin>
                            <Form ref="ruleForm2"
                                :model="ruleForm2"
                                :rules="rules2">
                                <Form-item class="loginFormName">
                                    <p class="loginFormName-big">Hello!</p>
                                    <p class="loginFormName-small">欢迎登录企睿宝</p>
                                </Form-item>
                                <Form-item prop="username">
                                    <Input prefix="ios-person-outline" v-model="ruleForm2.username"  :maxlength="20" placeholder="请输入用户名" />
                                </Form-item>

                                <Form-item prop="password">
                                    <Input prefix="ios-lock-outline" v-model="ruleForm2.password" :maxlength="20" placeholder="请输入密码" v-number-letter-symbol-only  type="password"/>
                                    <a class="forget-pw f-14">忘记密码?</a>
                                </Form-item>
                                <!-- <Form-item prop="password">
                                    <Input type="password"
                                        pattern="[0-9a-zA-z]*"
                                        v-model="ruleForm2.password"
                                        placeholder="请输入密码"
                                        :maxlength="20"
                                        v-number-letter-symbol-only>
                                    <Icon type="md-lock"
                                        slot="prepend"
                                        class="login_icon_size"></Icon>
                                    </Input>
                                </Form-item> -->
                                <Form-item class="loginFormButton">
                                    <Button type="info" class="btn-login"
                                            @click="handleSubmit('ruleForm2')"
                                            long>登录
                                    </Button>
                                </Form-item>
                            </Form>
                        </div>             <a href="http://www.beianbeian.com/beianxinxi/6c4caf942c693a7d1efd1a9d70a2374d.html"
                            class="record" target="blank">鄂ICP备19006203号-1</a>
                    </div>
                </div>
            </diV>
        </div>
        <div class="waves" style="z-index: 1">
            <div class="wave wave1"></div>
            <div class="wave wave2"></div>
            <div class="wave wave3"></div>
            <div class="wave wave4"></div>
        </div>
    </div>
</template>
<script>
    import Cookies from 'js-cookie';
    export default {
        name: 'Login',
        data () {
            return {
                coverImgUrl: '',
                baseImg: require('@/images/bg0pic.jpg'),

                loginSpin: false,
                ruleForm2: {
                    username: '',
                    password: ''
                },
                rules2: {
                    username: [
                        {required: true, message: '请填写用户名', trigger: 'blur'},
                        {type: 'string', min: 1, max: 20, message: '用户名不能小于1位或大于20位', trigger: 'blur'},
                        {pattern: /^[a-zA-Z0-9_@.]*$/, message: '用户名只能由字母或数字或下划线组成', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请填写密码', trigger: 'blur'},
                        {type: 'string', min: 6, max: 20, message: '密码长度不能小于6位或大于20位', trigger: 'blur'}
                    ]
                },
                message: '',
                modal: false
            };
        },

        mounted () {
            this.getBgList();
        },

        methods: {
            getBgList () {
                let loginCurrentNum = localStorage.getItem('currentNum');
                let bgList = JSON.parse(localStorage.getItem('bgList'));
                this.coverImgUrl = '';
                console.log(loginCurrentNum, '102837');
                console.log(bgList, '102837');
                if(bgList !== null){
                    bgList.forEach(item => {
                        if (item.code == loginCurrentNum) {
                            this.coverImgUrl = item.url;
                            }
                    });
                }
            },
            keyLogin () {
                // enter键登陆
                this.handleSubmit('ruleForm2');
            },
            toIndex () {
                router.replace({path: '/Index'});
            },
            hideModal () {
                this.modal = false;
            },
            checkFormValidate (formValidate) {
                return true;
            },
            setLocalStorageInfo () {
                depot.get({
                    url: this.URL.USER.FIND_MY_ALL_INFO,
                    cb: (data) => {
                        if (data.code === 0) {
                            let userCompanyInfo = data.data;
                            localStorage.setItem('USER_NAME', userCompanyInfo.name);
                            localStorage.setItem('USER_TYPE', userCompanyInfo.type);
                            localStorage.setItem('company', JSON.stringify(userCompanyInfo.company));
                            this.$router.push('/home');
                        } else if (data.code === 999) {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: (error) => {
                        this.showSpin = false;
                    }
                });
            },
            handleSubmit (name) {
                let that = this;
                /*         let isUser = this.checkFormValidate(this.ruleForm2)
          if (!isUser) {
            this.$Message.error('请检查用户名是否符合规范!')
            return
          } */
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        depot.post({
                            url: this.URL.USER.LOGIN,
                            data: that.ruleForm2,
                            cb: (data) => {
                                if (data.code === 0) {
                                    this.$Message.success('登陆成功');
                                        localStorage.setItem('USER_ID', data.data.id);
                                    var nowLoginTime = new Date().getTime();
                                    var lastLoginTime = Cookies.get('lastLoginTime');
                                    // 超过两天没登录，则清空列表
                                    if (!lastLoginTime || nowLoginTime - lastLoginTime > 2 * 24 * 60 * 60 * 1000) {
                                        this.$store.state.app.pageOpenedList = [{
                                            title: '工作台',
                                            path: '/home',
                                            name: 'home_index'
                                        }];
                                    }
                                    Cookies.set('lastLoginTime', nowLoginTime);
                                    Cookies.set('user', this.ruleForm2.username);
                                    Cookies.set('phone', data.data.mobile);
                                    Cookies.set('access', 1);
                                    // 设置缓存信息
                                    this.setLocalStorageInfo();
                                } else {
                                    this.$Message.error(data.message);
                                }
                            }
                        });
                    } else {
                        this.$Message.error('请检查用户名和密码是否输入正确!');
                    }
                });
            },
            recordBtn () {
                window.location.href = 'https://www.baidu.com';
                // window.open('https://www.baidu.com'); // 在新标签页打开
            }
        }
    };
</script>
<style lang="less">
@import './login.less';
    .parent {
        /*水平居中*/
        position: relative;
        width: 100%;
        height: 100%;
        justify-content: center;
        padding-top: 27px;
        .login_title {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        img{
            width: 143px;
            height: 63px;
        }
        .login_title_box{
            margin: 27px 0 0 37px;
            display: flex;
            .login_contant_box{
                display: flex;
                justify-content: center;
                align-items: center;
            .login_title_box_contant{
                border-left: 1px solid #fff;
                margin: 10px 0 0 10px;
                padding-left: 10px;
            }
            .login_title_box_contant_bottom{
                width: 610px;
                display: flex;
                justify-content: space-between;
            }
            }

        }
    }
        .login_box_div{
            display: flex;
            justify-content: center;
            margin-top: 133px;
            .login_box{
            }
        }
    // 备案
        .record{
            display: block;
            z-index: 9;
            width: 100%;
            color: #fff;
            text-align: center;
            font-size: 14px;
            margin-top: 40px;
        }
        input.ivu-input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
            -webkit-text-fill-color: #fff !important;
            transition: background-color 5000s ease-in-out 0s;
        }
    }
    .record:hover{
        color: red
    }
    .loginForm-outer {
        .loginForm-outer-div{
        }
        // 临时
        .ivu-input {
            color: #fff;
            height: 38px;
            border-radius: 5px;
            border:none;
        }
        .ivu-input-prefix i, .ivu-input-suffix i{
            line-height: 2.5;
        }
    }
    .waves {
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: 231px;
        bottom: 0;
        left: 0;
        .wave{
            position: absolute;
            width: 100%;
            height: 231px;
            background-image: url("../images/wave.png");
            background-repeat: repeat-x;
            z-index: 1;
            left: 0px;
        }
        .wave1 {
            bottom: 0px;
            background-position: 1918px 0;
        }
        .wave2 {
            bottom: -30px;
            background-position: 1918px 0;
        }
        .wave3 {
            bottom: 0px;
            background-position: 0 0;
        }
        .wave4 {
            bottom: -30px;
            background-position: 0 0;
        }
        .wave1,.wave2{
            animation: myfirst 25s linear 0s infinite normal;
        }
        .wave3,.wave4 {
            animation: myfirst2 25s linear 0s infinite normal;
        }
    }
    @keyframes myfirst {
        0% {
            background-position: 1918px 0;
        }
        25% {
            background-position: 2877px 0;
        }
        50% {
            background-position: 3836px 0;
        }
        75% {
            background-position: 4795px 0;
        }
        100% {
            background-position: 5754px 0;
        }
    }
    @keyframes myfirst2 {
        0% {
            background-position: 0 0;
        }
        25% {
            background-position: 959px 0;
        }
        50% {
            background-position: 1918px 0;
        }
        75% {
            background-position: 2877px 0;
        }
        100% {
            background-position: 3836px 0;
        }
    }
    .forget-pw {
        text-align: right;
        // color: #005178;
        // text-decoration: underline;
        color: #fff;
        font-size: 14px;
        &:hover {
            color: #005178;
            text-decoration: underline;
        }
    }

    .btn-login {
        color: #fff!important;
        border: 1px solid #00354e!important;
        height: 40px!important;
        font-size: 18px!important;
        background-color: rgba(229, 229, 229, 0.6) !important;
        border-radius: 5px;
        width: 100%;
    }

    .loginForm {
        background-color: rgba(0, 0, 0, 0.3);
        border: 1px solid #070002;
        padding: 48px 110px 73px 110px;
        text-align: right;
    }

    .loginForm > form {
        width: 300px;
        margin: 0 auto;
    }

    .loginForm h3 {
        text-align: left;
    }

    .loginFormButton {
        margin-bottom: 0px !important;
        text-align: center;
    }

    .loginFormName {
        text-align: left;
        color: #fff;
        .loginFormName-big{
            font-size: 18px;
        }
        .loginFormName-small{
            font-size: 16px;
        }

    }

    .login_icon_size {
        font-size: 16px;
    }

    .login-vertical-center-modal {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-vertical-center-modal .ivu-modal {
        top: 0;
    }

    .login_loading_spin {
        border-radius: 5px;
        opacity: 0.6;
    }

    .login-spin-icon-load {
        animation: ani-demo-spin 1s linear infinite;
    }

    @keyframes ani-demo-spin {
        from {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(180deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
</style>
